<template>
  <div class="app-container" style="padding: 5px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
      <el-form-item label="查询方式" prop="qMode">
        <el-select v-model="queryParams.qMode" filterable style="width:150px;" @change="changeDictData">
            <el-option
            v-for="item in modeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年份" prop="year" v-if="queryParams.qMode!='yy'">
        <el-select v-model="queryParams.year" filterable style="width:150px;" @change="changeDictData">
            <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品品类" prop="type">
          <el-select v-model="queryParams.type" filterable style="width:150px;" @change="changeDictData">
              <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="一级品类" prop="brand">
          <el-select v-model="queryParams.brand" filterable style="width:150px;" @change="changeDictData">
              <el-option
              v-for="item in brandList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="二级品类" prop="bigname" v-if="queryParams.type!='brand'">
          <el-select v-model="queryParams.bigname" filterable style="width:150px;" @change="changeDictData">
              <el-option
              v-for="item in bignameList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </el-form-item>
    </el-form>
    <el-card>
      <div ref="chart1" style="width: 100%; height: 500px;"></div>
    </el-card>
    <el-card style="margin-top: 5px;">
      <div ref="chart2" style="width: 100%; height: 500px;"></div>
    </el-card>
  </div>
</template>

<script>
import { listScbSdsjDicts,listXmiSdsjSummary } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';

export default {
    name: "Xmtsdsj",
    data() {
        return {
          modeList: [
            {
              value: "yy",
              label: "年",
            },
            {
              value: "ym",
              label: "月",
            },
            {
              value: "wk",
              label: "周",
            },
          ],
          yearList: [],
          typeList: [
            {
              value: "brand",
              label: "一级品类",
            },
            {
              value: "bigname",
              label: "二级品类",
            },
          ],
          brandList: [],
          bignameList: [],
          queryParams: {
            qMode: null,
            year: null,
            type: null,
            brand: null,
            bigname: null,
          },
        }
    },
    created() {
      this.queryParams.qMode = "ym";
      this.queryParams.type = "brand";
      this.getScbSdsjDicts();
    },
    mounted(){
        
    },
    methods: {
      changeDictData(){
        this.getScbSdsjDicts();
      },
      getScbSdsjDicts(){
        listScbSdsjDicts(this.queryParams).then(res =>{
          if(this.queryParams.qMode!="yy"){
            this.yearList = res.data.years;
            this.queryParams.year = res.data.year;
          }
          this.brandList = res.data.brands;
          this.queryParams.brand = res.data.brand;
          if(this.queryParams.type!="brand"){
            this.bignameList = res.data.bignames;
            this.queryParams.bigname = res.data.bigname;
          }
          this.getXmiSdsjSummary();
        })
      },
      getXmiSdsjSummary(){
        listXmiSdsjSummary(this.queryParams).then(res =>{
          console.log(res.data.sdsj)
          let labels = [];
          if(res.data.sdsj.length>0){
              for(let i=0;i<res.data.sdsj.length;i++){
                if(this.queryParams.qMode=="yy"){
                  labels.push(res.data.sdsj[i].tag_date+"年")
                }else if(this.queryParams.qMode=="ym"){
                  labels.push(res.data.sdsj[i].tag_date.replace(/\-/g,'年')+"月");
                }else if(this.queryParams.qMode=="wk"){
                  labels.push(this.queryParams.year+"年第"+res.data.sdsj[i].tag_date.split("_")[1].replace(/wk/g,'周'))
                }
              }
          }
          let titleStr1 = "新媒体首单数据视图";
          let titleStr2 = "销售首单转化金额对比";
          let modestr = "";
          let typeStr = "";
          if(this.queryParams.qMode=="yy"){
            modestr = "-年份"
          }else if(this.queryParams.qMode=="ym"){
            modestr = "-"+this.queryParams.year+"年月份"
          }else if(this.queryParams.qMode=="wk"){
            modestr = "-"+this.queryParams.year+"年周"
          }
          if(this.queryParams.type=="brand"){
            typeStr = "-"+this.queryParams.brand;
          }else{
            typeStr = "-"+this.queryParams.brand+"-"+this.queryParams.bigname;
          }
          titleStr1 = titleStr1+modestr+typeStr;
          titleStr2 = titleStr2+modestr+"-"+this.queryParams.brand;
          const chart1 = echarts.init(this.$refs.chart1);
          const chart2 = echarts.init(this.$refs.chart2);
          const option1 = {
            title: {
                text: titleStr1,
                textStyle: {
                    fontSize: 14, // 设置标题字体大小
                    fontWeight: 'bold', // 设置字体粗细
                    color:'#0099ff'
                },
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    return params[0].data.extraInfo
                }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            grid: {
              left: '5%',   // 画布左 10%
              right: '5%',  // 画布右 10%
              top: '10%',
              bottom: '15%'
            },
            xAxis: { 
              type: 'category', 
              data: labels,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 10, // 文字大小
                color: '#333' // 文字颜色
              },
            },
            yAxis: { 
              type: 'value' 
            },
            series: [
              {
                type: 'line',
                data: res.data.sdsj.map(item => ({
                  value: Number(item.total_price).toFixed(2),
                  name: item.tag_date,
                  extraInfo:"<span style='color:black;'>日期: "+item.tag_date+"<br />产品品类: "+item.brand+"<br/>当期金额: "+item.total_price+"<br />-----------------------------</span>"+
                  "<br/><span style='color:red;'>环比金额："+Number(item.prev_total_price).toFixed(2)+"元<br />环比增长率："+Number(item.MoM_growth*100).toFixed(2)+"%<br />-----------------------------</span>"+
                  "<br/><span style='color:blue;'>同比金额："+Number(item.yoy_prev_total_price).toFixed(2)+"元<br />同比增长率："+Number(item.YoY_growth*100).toFixed(2)+"%<br/>-----------------------------</span>",
                })),
                lineStyle: { width: 2, color: 'orange' },
                areaStyle: { color: 'green', opacity: 0.2 },  // 🔑 打开填充
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}元',       // {c} 即当前值
                  fontSize: 12,
                  color: '#333'
                }
              }
            ]
          };
          chart1.setOption(option1);

          const option2 = {
            title: {
                text: titleStr2,
                textStyle: {
                    fontSize: 14, // 设置标题字体大小
                    fontWeight: 'bold', // 设置字体粗细
                    color:'#0099ff'
                },
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    return params[0].data.extraInfo
                }
            },
            grid: {
              left: '5%',   // 画布左 10%
              right: '5%',  // 画布右 10%
              top: '10%',
              bottom: '15%'
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: { 
              type: 'category', 
              data: labels,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 10, // 文字大小
                color: '#333' // 文字颜色
              },
            },
            yAxis: { 
              type: 'value' 
            },
            series: [
              {
                type: 'line',
                data: res.data.scxsdb.map(item => ({
                  value: Number(item.sc_zb*100).toFixed(2),
                  name: item.tag_date,
                  extraInfo:"<span style='color:black;'>日期: "+item.tag_date+"<br />产品品类: "+item.brand+"<br/>-----------------------------</span>"+
                  "<br/><span style='color:red;'>市场首单金额："+Number(item.sc_money).toFixed(2)+"元<br/>销售金额: "+item.xs_money+"<br />占比："+Number(item.sc_zb*100).toFixed(2)+"%<br />-----------------------------</span>"
                })),
                lineStyle: { width: 2, color: 'orange' },
                areaStyle: { color: 'green', opacity: 0.2 },  // 🔑 打开填充
                label: {
                  show: true,
                  position: 'top',        // top / inside / insideTop ...
                  formatter: '{c}%',       // {c} 即当前值
                  fontSize: 12,
                  color: '#333'
                }
              }
            ]
          };
          chart2.setOption(option2);
        })
      },
    }
}
</script>